import React, { useEffect } from "react";
// 引入echarts，哪个页面用就在哪个页面引
import * as echarts from "echarts";

let myChart;
let myChart2;
let myChart3;

const Index = () => {
  // 引入使用echarts，需要获取dom节点，所以要放在useEffect里面
  useEffect(() => {
    init1();
    init2();
    init3();

    window.onresize = () => {
      console.log("窗口尺寸发生了改变");
      myChart.resize();
      myChart2.resize();
      myChart3.resize();
    };

    return () => {
      // 组件销毁的时候，需要去销毁echarts的实例
      myChart.dispose();
      myChart2.dispose();
      myChart3.dispose();
    };
  }, []);

  const init1 = () => {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
        textStyle: {
          color: "red",
          fontSize: "30px",
        },
        link: "https://www.baidu.com",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  };

  const init2 = () => {
    // 基于准备好的dom，初始化echarts实例
    myChart2 = echarts.init(document.getElementById("main2"));
    // 绘制图表
    myChart2.setOption({
      title: {
        text: "商品销售额占比",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "70%",
        top: "45%",
        itemGap: 30,
        itemWidth: 30,
        itemHeight: 30,
        textStyle: {
          color: "#aaa",
          fontSize: 20,
        },
      },
      color: ["#B1DDDC", "#DCBAD8", "#F6F2BD", "#F4A99F"],
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          center: ["35%", "50%"],
          data: [
            { value: 1048, name: "家具" },
            { value: 735, name: "儿童产品" },
            { value: 580, name: "文创文具" },
            { value: 484, name: "成人饰品" },
          ],
          label: {
            show: false,
            position: "center",
          },
        },
      ],
    });
  };

  const init3 = () => {
    // 基于准备好的dom，初始化echarts实例
    myChart3 = echarts.init(document.getElementById("main3"));
    // 绘制图表
    myChart3.setOption({
      title: {
        text: "每月订单量",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["房屋", "家服", "维修"],
        right: "3%",
        itemGap: 30,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "房屋",
          type: "line",
          // stack: 'Total',
          smooth: true,
          data: [120, 132, 101, 134, 90, 230, 210, 310, 114, 210, 220, 269],
        },
        {
          name: "家服",
          type: "line",
          smooth: true,
          // stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310, 156, 198, 211, 267, 222],
        },
        {
          name: "维修",
          type: "line",
          // stack: 'Total',
          smooth: true,
          data: [150, 232, 201, 154, 190, 330, 410, 340, 211, 255, 177, 198],
        },
      ],
    });
  };

  return (
    <div style={{ width: "1000px" }}>
      <h3>echarts图表</h3>
      <div
        id="main"
        style={{ height: "500px", border: "1px solid #000" }}
      ></div>

      <hr />

      <div
        id="main2"
        style={{ height: "500px", border: "1px solid #000" }}
      ></div>

      <hr />

      <div
        id="main3"
        style={{ height: "500px", border: "1px solid #000" }}
      ></div>
    </div>
  );
};

export default Index;
